<template>
  <div class="plan-list-view">

    <div class="top">
      <el-checkbox v-model="checked" @change="checkChange">只看里程碑</el-checkbox>

<!--      <el-button type="primary" icon="el-icon-edit" size="mini" @click="addPlan">添加里程碑</el-button>-->
    </div>

    <div class="table-view">
      <el-table
        size="medium"
        :data="checked?tableData2:tableData"
        align="center"
        border
        row-key="id"
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        style="width: 100%">

        <el-table-column
          align="center"
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          header-align="center"
          prop="task_name"
          label="里程碑/任务名称">
          <template slot-scope="scope">

            <span v-if="!scope.row.children.length && scope.row.level == 1" style="padding-left: 25px">  </span>
            <span>{{scope.row.task_name}}</span>

          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="start_after_days"
          label="父任务开始几天后开始/前置任务结束几天后开始"
          width="200">
        </el-table-column>
        <el-table-column
          align="center"
          prop="foreground_task_name"
          label="前置任务"
          width="150">
        </el-table-column>
        <el-table-column
          align="center"
          prop="duration"
          label="工期（天）"
          width="150">
        </el-table-column>
        <el-table-column
          align="center"
          label="交付文档"
          width="150">
          <template slot-scope="scope">
            <div v-if="scope.row.files.length > 0">
              <el-popover
                placement="top-start"
                width="200"
                trigger="hover">
                <div>
                  <div v-for="item in scope.row.files" style="padding-bottom: 5px">
                    <i class="el-icon-document">{{  item.file_name}}</i>
                  </div>
                </div>
                <i slot="reference" class="el-icon-document">{{scope.row.files.length}}</i>
              </el-popover>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="阶段性评审"
          width="100">
          <template slot-scope="scope">
            <span>{{scope.row.periodical_review?'是':'否'}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="强制验收"
          width="100">
          <template slot-scope="scope">
            <span>{{scope.row.mandatory_check?'是':'否'}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          width="320">
          <template slot-scope="scope">

            <div class="tab-opt-view">
              <a class="opt-btn" style="color: dodgerblue" v-if="scope.row.level != 5" @click="addChilen(scope.row)">添加任务</a>

              <a class="opt-btn" style="color: forestgreen" @click="editClick(scope.row,scope.$index)">编辑</a>
              <a class="opt-btn" style="color: red" @click="deleteClick(scope.row.id)">删除</a>

              <el-dropdown>
                <span class="el-dropdown-link">
                  ...
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <a class="opt-btn" style="color: dodgerblue" @click="addFiles(scope.row)">添加文档</a>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="checkTop(scope.row.id)">
                    <a class="opt-btn" style="color: dodgerblue"  @click="topClick(scope.row.id)">上移</a>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="checkBottom(scope.row.id)">
                    <a class="opt-btn" style="color: dodgerblue"  @click="bottomClick(scope.row.id)">下移</a>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>

          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      class="editDialog"
      v-if="editShow"
      :title="dialogTitle"
      :visible.sync="editShow"
      width="900px"
      :before-close="handleClose">

      <edit-plan-view ref="editPlan" :data="editItem" :documents="documents" :plans="plans"></edit-plan-view>

      <span slot="footer" class="dialog-footer">
        <el-button @click="editShow = false">取 消</el-button>
        <el-button type="primary" @click="dialogConfirm">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      v-if="dialogVisible"
      title="文档"
      :visible.sync="dialogVisible"
      width="500px"
      append-to-body
      :before-close="handleClose">

      <el-form ref="documentForm" :rules="rules" :model="documentData" class="demo-form-inline" label-width="130px" size="medium" label-position="left">
        <el-form-item label="文档名称" prop="file_name">
          <el-input v-model="documentData.file_name" placeholder="请输入文档名称"></el-input>
        </el-form-item>
        <el-form-item label="文档交付所属任务">
          <el-select v-model="documentData.task_id" placeholder="请选择所属任务" @change="planChange" style="width: 100%">
            <el-option
              v-for="item in plans"
              :key="item.id"
              :label="item.task_name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文档类型" prop="file_type">
          <el-select v-model="documentData.file_type"placeholder="请选择文档类型"  @change="typeChange" style="width: 100%">
            <el-option
              v-for="(item,index) in options"
              :key="index"
              :label="item.dict_val"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申报所需文件" prop="delivery">
          <el-switch v-model="documentData.need"></el-switch>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="filesConfirm">确 定</el-button>
        </span>
    </el-dialog>

  </div>
</template>

<script>
  import editPlanView from "./editPlanView";

    export default {
        name: 'PlanList',
        components:{editPlanView},
        props: {
            documents:Object,
            plans:Array
        },
        data: function() {
            return {
                dialogTitle:'',
                checked: false,
                tableData: [],
                tableData2: [],
                editItem: {},
                editShow: false,
                editId: 0,
                ab:{},
                id:1,
                isEdit:false,
                addId:-1,

                dialogVisible:false,
                options: [],
                documentData:{},
                rules: {
                    file_name: [
                        { required: true, message: '请输入名称', trigger: 'blur' }
                    ],
                    file_type: [
                        { required: true, message: '请选择文档类型', trigger: 'change' }
                    ],
                },
            }
        },
        mounted: function() {
            this.options = this.$store.getters.sysDic('file_type')
        },
        methods: {
            setData:function(list){
                this.tableData = list;
            },
            checkChange:function(value){
                if (value){
                    this.tableData2 = [];
                    for (let i = 0; i < this.tableData.length; i++){
                        let data = {...this.tableData[i]};
                        data.children = [];
                        this.tableData2.push(data)
                    }
                }
            },
            bottomClick:function(id){
                let arr = this.findData(id,this.tableData)

                if (arr.length > 1){
                    let data = [...this.tableData]
                    for (let i = 0; i < arr.length; i ++){
                        if (i == arr.length-2){
                            this.downGo(data[arr[i]].children,arr[i+1])
                            break;
                        }
                        data = data[arr[i]].children
                    }
                }else if (arr.length == 1){
                    this.downGo(this.tableData,arr[0])
                }
            },
            topClick:function(id){
                let arr = this.findData(id,this.tableData)


                if (arr.length > 1){
                    let data = [...this.tableData]
                    for (let i = 0; i < arr.length; i ++){
                        if (i == arr.length-2){
                            this.upGo(data[arr[i]].children,arr[i+1])
                            break;
                        }
                        data = data[arr[i]].children
                    }
                }else if (arr.length == 1){
                    this.upGo(this.tableData,arr[0])
                }
            },
            downGo:function(arr,index){
                arr[index] = arr.splice(index+1, 1, arr[index])[0];
            },
            upGo:function(arr,index){
                arr[index] = arr.splice(index-1, 1, arr[index])[0];
            },
            checkTop:function(id){
                let arr = this.findData(id,this.tableData)
                if (arr.length > 0 && arr[arr.length-1]){
                    return true
                }else{
                    return false
                }
            },
            checkBottom:function(id){
                let arr = this.findData(id,this.tableData)

                let length = 0;
                if (arr.length > 1){
                    let data = [...this.tableData]
                    for (let i = 0; i < arr.length; i ++){
                        data = data[arr[i]].children
                        if (i == arr.length-2){
                            length = data.length;
                            break;
                        }
                    }
                }else if (arr.length == 1){
                    length = this.tableData.length;
                }

                if (arr.length > 0 && arr[arr.length-1] != length-1){
                    return true
                }else{
                    return false
                }
            },
            findData:function(id,list){
                let arr = [];
                for (let i = 0; i < list.length; i++){
                    if (list[i].id == id){
                        arr.push(i)
                        break
                    }else if (list[i].children && list[i].children.length > 0){
                        let a = this.findData(id,list[i].children)
                        if (a.length > 0){
                            arr.push(i);
                            arr = arr.concat(a);
                            break;
                        }
                    }
                }

                return arr;
            },
            deleteClick:function(id){
                let arr = this.findData(id,this.tableData)
                if (arr.length > 1){
                    let data = [...this.tableData]
                    for (let i = 0; i < arr.length; i ++){
                        if (i == arr.length-2){
                            data[arr[i]].children.splice(arr[arr.length-1],1)
                            break;
                        }
                        data = data[arr[i]].children
                    }
                }else if (arr.length == 1){
                    this.tableData.splice(arr[0],1)
                }

                let index = this.plans.findIndex(a=>a.id == id)
                if (index != -1){
                    let data = this.plans[index];
                    if (data.children && data.children.length){
                        let list = this.getChildren(data.children);
                        list.push(id)
                        for (let i = 0; i< list.length; i++){
                            let idx = this.plans.findIndex(a=>a.id == list[i])
                            if (idx != -1){
                                this.plans.splice(idx,1);
                            }
                        }
                    }else {
                        this.plans.splice(index,1);
                    }

                }

                this.$emit('save-change')
            },
            getChildren:function(list){
                let arr = [];
                for (let i = 0; i < list.length; i++){
                    arr.push(list[i].id);
                    if (list[i].children && list[i].children.length){
                        arr = arr.concat(this.getChildren(list[i].children))
                    }
                }
                return arr;
            },
            addPlan: function() {
                this.dialogTitle = "新增里程碑"
                let data = this.createData()

                // this.editItem = {...data}
                // this.editIndex = -1;
                // this.editShow = true;

                // this.tableData.push(data)
                // this.plans.push(data);

                this.addId = -1;
                this.isEdit = false;
                this.editItem = data;
                this.editShow = true;
                setTimeout( () => {
                    if (this.$refs.editPlan){

                        this.$refs.editPlan.dealPlanList();
                    }
                },500)
            },
            addChilen:function (item){
                this.dialogTitle = "新增任务"
                let num = item.level + 1

                let data = this.createData(item);
                // item.children.push(data);
                //
                // this.plans.push(data);


                this.addId = item.id;
                this.isEdit = false;
                this.editItem = data;
                this.editShow = true;
                setTimeout(() => {
                    if (this.$refs.editPlan){
                        let arr = this.findData(this.addId,this.tableData);
                        console.log(arr)
                        let list = [];
                        let data = [...this.tableData];
                        for (let i = 0; i < arr.length; i++){
                            let a = data[arr[i]];
                            console.log(a)
                            list.push(a.id);
                            if (arr.length > 1 && i != arr.length-1){
                                data = a.children;
                            }
                        }
                        this.$refs.editPlan.dealPlanList(list);
                    }
                },500)
            },
            editClick: function(item,index) {
                if (item.level == 1){
                    this.dialogTitle = "编辑里程碑"
                }else{
                    this.dialogTitle = "编辑任务"
                }

                let data = JSON.parse(JSON.stringify(item))
                this.editItem = data;
                this.editId = data.id;
                this.isEdit = true;
                this.editShow = true;
                setTimeout( () => {
                    if (this.$refs.editPlan){
                        let arr = this.findData(this.editId,this.tableData);
                        console.log(arr)
                        let list = [];
                        let data = [...this.tableData];
                        for (let i = 0; i < arr.length; i++){
                            let a = data[arr[i]];
                            console.log(a)
                            list.push(a.id);
                            if (arr.length > 1 && i != arr.length-1){
                                data = a.children;
                            }
                        }
                        this.$refs.editPlan.dealPlanList(list);
                    }
                },500)
            },
            handleClose:function () {
                this.editShow = false;
                this.dialogVisible = false;
            },
            dialogConfirm: function(){

                if (this.$refs.editPlan){
                    this.$refs.editPlan.validateFun().then(()=>{
                        let data1 = {...this.editItem}

                        if (!this.isEdit){

                            if (this.addId == -1){
                                this.tableData.push(data1)
                            }else{
                                let ls = this.findData(data1.parent_id,this.tableData)

                                let data = [...this.tableData]
                                for (let i = 0; i < ls.length; i ++){

                                    data = data[ls[i]].children
                                }
                                data.push(data1)
                            }
                            this.plans.push(data1);
                        }
                        else {
                            let arr = this.findData(this.editId,this.tableData)


                            let data2 = {}
                            if (arr.length > 1){
                                let data = [...this.tableData]
                                for (let i = 0; i < arr.length; i ++){
                                    if (i == arr.length-1){
                                        data2 = {...data[arr[i]]};
                                        if (data1.parent_id == data2.parent_id){
                                            this.$set(data,arr[i],data1)
                                        }else {
                                            data.splice(arr[i],1)
                                            let ls = this.findData(data1.parent_id,this.tableData)

                                            let ss = [...this.tableData]
                                            for (let i = 0; i < ls.length; i ++){

                                                ss = ss[ls[i]].children
                                            }
                                            ss.push(data1)
                                        }

                                        break;
                                    }
                                    data = data[arr[i]].children
                                }
                            }else if (arr.length == 1){
                                data2 = {...this.tableData[arr[0]]}
                                this.$set(this.tableData,arr[0],data1)
                            }

                            for (let i = 0; i < data2.files.length; i++){
                                let doc = data2.files[i];
                                let index = this.documents.list.findIndex(a=>a.id == doc.id);
                                if (index != -1){
                                    this.documents.list.splice(index,1)
                                }
                            }
                        }

                        this.documentDeal(data1)

                        this.editShow = false;

                        if(this.checked){
                            this.tableData2 = [];
                            for (let i = 0; i < this.tableData.length; i++){
                                let data = {...this.tableData[i]};
                                data.children = [];
                                this.tableData2.push(data)
                            }
                        }

                        this.$emit('save-change')
                    })
                }

            },
            documentDeal:function(data){

                for (let i = 0; i < data.files.length; i++){

                    let doc = data.files[i];
                    doc.task_id = data.id + '';
                    doc.task_name = data.task_name;

                    let index = this.documents.list.findIndex(a=>a.id == doc.id);

                    if (index == -1){
                        this.documents.list.push(doc)
                    }else{
                        this.$set(this.documents.list,index,doc);
                    }

                }

            },
            createData:function (item = null) {
                let data = {};
                data.id = this.id + "";
                data.task_name = ''
                data.level = item ? item.level + 1 : 1
                data.parent_id = item ? item.id : ""
                data.parent_name = item ? item.task_name : ''
                data.foreground_task_id = "";
                data.foreground_task_name = ''
                data.start_after_days = 0
                data.duration = ''
                data.periodical_review = false;
                data.mandatory_check = false;
                data.files = [];
                data.children = [];
                this.id ++;
                return data;
            },
            deleteDoc:function (doc) {
                let arr = this.findData(doc.task_id,this.tableData)

                let plan = {}
                if (arr.length > 1){
                    let data = [...this.tableData]
                    for (let i = 0; i < arr.length; i ++){
                        if (i == arr.length-1){
                            plan = data[arr[i]]
                            break;
                        }
                        data = data[arr[i]].children
                    }
                }else if (arr.length == 1){
                    plan = this.tableData[arr[0]]
                }

                let index = plan.files.findIndex(a=>a.id = doc.id)
                if (index != -1){
                    plan.files.splice(index,1);
                }

                this.$emit('save-change')
            },
            addDoc:function (doc) {
                let arr = this.findData(doc.task_id,this.tableData)

                let plan = {}
                if (arr.length > 1){
                    let data = [...this.tableData]
                    for (let i = 0; i < arr.length; i ++){
                        if (i == arr.length-1){
                            plan = data[arr[i]]
                            break;
                        }
                        data = data[arr[i]].children
                    }
                }else if (arr.length == 1){
                    plan = this.tableData[arr[0]]
                }
                plan.files.push(doc)

                this.$emit('save-change')
            },
            addFiles:function (item) {

                this.documentData = {
                    id:"0",
                    file_name:'',
                    file_type:'',
                    type_name:'',
                    need:false,
                    task_id:item.id + "",
                    task_name:item.task_name,
                }
                this.dialogVisible = true;
            },
            filesConfirm:function () {

                this.$refs.documentForm.validate((valid) => {

                    if (valid){
                        let data = {...this.documentData}

                        data.id = this.documents.id + ""
                        this.documents.id++;
                        this.documents.list.push(data)
                        this.addDoc(data)

                        this.dialogVisible = false
                    }
                });

            },
            planChange:function (id) {
                let index = this.plans.findIndex(a=>a.id == id)
                if (index != -1){
                    let data = this.plans[index];
                    this.documentData.task_id = data.id + "";
                    this.documentData.task_name = data.task_name;
                }

            },
            typeChange:function (id) {

                let index = this.options.findIndex(a=>a.id == id)
                if (index != -1){
                    let data = this.options[index];
                    this.documentData.file_type = data.id
                    this.documentData.type_name = data.dict_val
                }
            }
        }
    }
</script>

<style lang="scss">
  @import "../../../../../assets/scss/views/setting/model/planList.scss";
</style>
